<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>购物车页面</title>
    <link rel="stylesheet" href="/user/css/category.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<%--    导航--%>
<div class="header-nav">
    <div class="header-nav-middle">
        <a href="/user/index.jsp" class="header-nav-item">LoveLife!</a>
        <a href="javascript:void(0)" class="header-nav-item">实物周边</a>
        <a href="javascript:void(0)" class="header-nav-item">活动中心</a>
        <a href="/user/PersonalCenter.jsp" class="header-nav-item">个人中心</a>
        <a href="/user/category.jsp" class="header-nav-item" style="margin-left: 425px">欢迎来到购物车页面</a>
        <c:if test="${loginUser!=null}">
            <a href="/commons/login.jsp" class="header-nav-item">
                <c:out value="${loginUser.account},你好！">
                </c:out>
            </a>
        </c:if>
        <c:if test="${loginUser==null}">
            <a href="/commons/login.jsp" class="header-nav-item">登录</a>
        </c:if>
        <a href="/commons/register.jsp" class="header-nav-item">立即注册</a>
    </div>
</div>
<div class="header-nav-bottom"></div>
<%--    内容--%>
<div class="content">
    <form action="/order.do" method="post">
        <div class="content-container">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">欢迎来到购物车！</div>
                <div class="panel-body container">
                    <p style="text-align: center" class="col-md-9 p1"> 请为您喜欢的商品付款：</p>
                    <div class="to-total col-md-1">总计:</div>
                    <input class="to-total-inp col-md-2" id="inp-total" name="total" value="0"/>
                    <input type="hidden" name="method" value="creatOrder" />
                </div>

                <!-- Table -->
                <table id="table" class="table table-hover table-mid row container" style="margin-left: 0px;">
                    <tr>
                        <td class="col-md-2"><input type="checkbox" onclick="" class="calculate"/></td>
                        <td class="col-md-2"><span>名称</span></td>
                        <td class="col-md-2"><span>图片</span></td>
                        <td class="col-md-2"><span>数量</span></td>
                        <td class="col-md-2"><span>价格</span></td>
                        <td class="col-md-2"><span>移除</span></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" onclick="" class="check-box"/></td>
                        <td><span>张三</span></td>
                        <td><img src="/static/images/p1.jpg" width="50px"/></td>
                        <td><span>1</span></td>
                        <td><span>99.00</span></td>
                        <td>
                            <button type="button" class="btn btn-danger" id="btn1111">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true">移除</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <%--页码--%>
            <div class="container">
                <div class="row">
                    <div class="pull-right">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <input type="hidden" name="total1" value="100"  />
            <input type="hidden" name="uid" id="uid" value="${loginUser.id}"/>
            <input type="submit" class="col-md-2 btn-buyCart" id="btn-buyCart" value="立即购买" style="margin: 0 auto">
        </div>
    </form>
</div>
<%--底部--%>
<div class="bottom">
<%--    判断--%>
    <!-- Small modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        //获取购物车详情
        $.getJSON("/cart.do",{method:"selectCartByUid",uid:$("#uid").val()},function (cart) {
            //清空
            $("#table").html("");
            //遍历输出购物车集合
            $("#table").append("<tr>\n" +
                "                    <td class=\"col-md-2\"><input type=\"checkbox\" onclick=\"\" class=\"calculate\" checked='true'/></td>\n" +
                "                    <td class=\"col-md-2\"><span>名称</span></td>\n" +
                "                    <td class=\"col-md-2\"><span>图片</span></td>\n" +
                "                    <td class=\"col-md-2\"><span>数量</span></td>\n" +
                "                    <td class=\"col-md-2\"><span>价格</span></td>\n" +
                "                    <td class=\"col-md-2\"><span>移除</span></td>\n" +
                "                </tr>")
            for(let j = 0;j<cart.length;j++){
                let $input = $("<td class=\"col-md-2\"><input type=\"checkbox\" name='gid' value='"+cart[j].id+"' onclick=\"\" class=\"check-box\" checked='true'/></td>");
                let $name = $("<td class=\"col-md-2\"></td>").html("<span>"+cart[j].name+"</span>");
                let $img = $("<td class=\"col-md-2\"></td>").html("<img src=\"/user/images"+cart[j].image+"\" width=\"50px\"/>");
                let $num = $("<td class=\"col-md-2\"></td>").html("<input class='number-middium-total' id='"+cart[j].id+"' price='"+(cart[j].total/cart[j].nums)+"' type='number' min='1' max='100' oninput=\"if(value.length>2)value=value.slice(0,2)\" value='"+cart[j].nums+"'>");
                let $total = $("<td class=\"col-md-2\"></td>").html("<span class='cart-total'>"+cart[j].total+"</span>");

                let $button = $("<button type=\"button\" class=\"btn btn-danger\" id="+cart[j].id+">" +
                    "<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\">移除</span></button>");
                let $remove = $("<td class=\"col-md-2\" ></td>").html($button);
                $button.click(function () {
                    let id = $(this).attr("id");
                    $.getJSON("/cart.do",{method:"delCartById",id:id},function (bool) {
                        if(bool){
                            document.getElementById(id).parentNode.parentNode.parentNode.removeChild(document.getElementById(id).parentNode.parentNode);
                        }else{
                            alert("删除失败,请稍后再试！");
                        }
                    })
                })
                //tr
                let $tr = $("<tr></tr>");
                $tr.append($input).append($name).append($img).append($num).append($total).append($remove);
               //添加到内容区
               $("#table").append($tr);
            }

            //重新计算
            let total = 0;
            function compute(){
                    let $cart = $(".cart-total");
                    //清空总计
                    total=0;
                    for (let i=0;i<$cart.length;i++){
                        //判断当前对象是否被锁定
                        let checked = $cart.eq(i)[0].parentNode.parentNode.firstElementChild.firstElementChild;
                        if(checked.checked){
                            total+=Number($cart.eq(i).text());
                        }
                    }
                    $("#inp-total").val(total);
            }
            //全选框
            let $totalSwitch = $(".calculate");
            $totalSwitch.click(()=>{
                $(".check-box").each(function () {
                    //遍历checked赋值属性
                    $(this).prop("checked",$totalSwitch.prop("checked"));
                    compute();
                })
            })
            //点击复选框重新计算总计价格
            $(".check-box").click(()=>{
                let bool = true;
                $(".check-box").each(function () {
                    compute();
                    //如果有一个为false，bool为false
                    if(!this.checked){
                        bool = false;
                        console.log(bool);
                    }
                })
                console.log("外面的"+bool);
                console.log($("#inp-total").val());
                //给全选框赋值
                $totalSwitch.prop("checked",bool);
            })
            //总计
            compute();
            //购物数量的加减
            let $numbernn = $(".number-middium-total");
            $numbernn.each(function () {
                $(this).change(function () {
                    let id = Number($(this).attr("id"));
                    let price = Number($(this).attr("price"));
                    let numOne = Number($(this).val());
                    let totalOne = price*numOne;
                    $(this).parent().next().children(0).html(totalOne);
                    //重新计算
                    compute();
                    //修改购物车数据库
                    $.getJSON("/cart.do",{method:"upDateById",id:id,num:numOne,total:totalOne},function (resp) {
                        if(resp){
                            console.log("购物车数据修改成功")
                        }
                    })
                })
            })
        });
        //点击跳转支付界面
        // $("#btn-buyCart").click(function () {
        //      location.href="/user/toPay.jsp";
        // })
    })
</script>
</body>
</html>
